<!DOCTYPE html>
<meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"/>
{% load staticfiles %}
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>记述宝</title>
<link rel="stylesheet" href="">
<style type="text/css">
div, body{
margin:0;
padding:0;
}

.dv-item-outer {
	height:37px;/*background-color:yellow;*/margin-top:15px;
}

.search-div {
	background-color:rgb(227,228,227);border-bottom: 2px solid rgb(203,204,203); border-image: none; top: 0px; 
	width:100%;
}

.search-div input {
	width:90%;height:25px;border-radius:20px;border:1px solid rgb(195,195,195);font-size:10px;padding-left:10px;
}

/* 搜索框的边框颜色 */
.search-div-border {

}

/* checking: */
.checking .note-item-checkbox {
display:block;
width:40px;
}

.notchecking .note-item-checkbox {
display:none;
width:5px;
}

.notchecking .note-item-image {
	margin-right:60px;
}

.checking .note-item-image {
	margin-right:15px;
}





.underdiv {
	margin: 0px; border-radius: 5px; border: 2px solid rgb(195, 195, 195); border-image: none; width: 100%; height: 25px;
	position:fixed;
	bottom:0;
}

/* 里面的一个一个的按键 */

/* 样式：一个记述条目 */
.item .note-item-checkbox,.item .note-item-image,.item .itemitem{
	margin-top:25px;
} 


.showcheck .jsbcheckbox {
	display:block;
}

.showcheck .jsbtypeimg{
	margin-right:10px;
}

.notshowcheck .jsbcheckbox {
	display:none;
}

.notshowcheck .jsbtypeimg{
	margin-right:30px;
}
</style>
<link rel="stylesheet" type="text/css" href="{% static 'bootstrap/css/bootstrap-theme.css' %}" />
<link rel="stylesheet" type="text/css" href="{% static 'bootstrap/css/bootstrap.css' %}" />
<link rel="stylesheet" type="text/css" href="{% static 'styles/radius.css' %}" />

<script type="text/javascript" src="{% static 'scripts/jquery.min.js' %}" ></script>
<script type="text/javascript" src="{% static 'bootstrap/js/bootstrap.js' %}" ></script>
<script type="text/javascript" src="{% static 'bootstrap/js/npm.js' %}" ></script>
<script type="text/javascript" >

function turndetail(strguid, title){

    // alert(title);
    // alert(strguid);
    window.location.href = "/homeapp/log/detail?guid=" + strguid + "&mytitle=" + title;
}
// onload = function(){
//	document.body.style.backgroundColor = "rgb(227,228,227)";
// };
$(function(){
        // alert("sp age");
	document.body.style.backgroundColor = "rgb(227,228,227)";

	// 注册 筛选框的click
	$(".jsbcheckbox").click(function(){

		//alert($(this).prev().attr("value"));

        // 如果它是正被选择的状态
        if ($(this).attr("checking")){
            $(this).removeAttr("checking");
            $(this).css("background-image", "url('{% static 'img/blank.jpg' %}')");
            $(this).prev().attr("value", "");


        } else {
            $(this).attr("checking", "1");    
            //alert("checking");


            // 添加背景图片，显示勾
            $(this).css("background-image", "url('{% static 'img/check.jpg' %}')");
            $(this).css("background-position", "center");
            $(this).css("background-size", "20px 20px");
            $(this).prev().attr("value", $(this).prev().attr("mayvalue"));



//ckground-position: center;
//background-repeat: no-repeat;
//background-attachment: fixed;

        }

        // alert($(this).css("background-color"));


        // 修改自己的图标
        // $(this).css("background-color", "black");


		//alert("show again");




	});




});

// 提交复选框过的记述条目
function submititems(){
    //$("#mainform").submit();
    alert("don't submit");
}

// obsolete
function showorhidecheck(ele){
	if ($("#imgbutton").attr("class") == "notchecked" ){
		// set to checked
		$("#imgbutton").attr("class", "checked");
//		$("div.notshowcheck").removeClass("notshowcheck").addClass("showcheck");
		$("div[class='dv-item-outer notshowcheck']").attr("class", "dv-item-outer showcheck");
	}
	else {
		$("#imgbutton").attr("class", "notchecked");
		$("div[class='dv-item-outer showcheck']").attr("class", "dv-item-outer notshowcheck");
//		$("div.notshowcheck").removeClass("showcheck").addClass("notshowcheck");
		//$("div.showcheck").attr("class", "notshowcheck");
	}

}


</script>

</head>
<!---
<div style="">

</div>
-->
<!-- 这个就是上面的固定的搜索框 -->
<body>
<div class="search-div" style="position: fixed;">
<input type="text" style="margin:5px;margin-left:15px;" placeholder="快速搜索关键字"/>
</div>

<!--补充空档-->
<div style="height:37px;background-color:red;">
</div>









<form id="mainform" method="post" action="/homeapp/log/add/" enctype="multipart/form-data" >
             {% csrf_token %}
{% for item in viewmodel.items  %}

{% comment %}
获得索引 forloop.counter0
{{ forloop.counter0 }} 
{% endcomment %}

<!-- {{ item.Text  }} -->
<!-- 漂亮 -->
<div style="border:0px dotted green;margin:5% 10%">
    <div onclick="turndetail('{{ item.guid  }}', '{{ item.Title }}');" style="background-repeat:norepeat;background-size:100% 100%;height:50px;background-image:url('{% static 'img/tlog_index_item_back.jpg' %}')">
        <span style="float:left;font-size:20px;margin-left:20px;margin-top:10px;">
            {{ item.Title  }}
        </span>
    </div>
</div>

{% endfor %}

</form>

<div style="height:70px;"></div>

<!--<div  class="underdiv" style="background-color:red;">-->
<div class="underdiv" style="background-color:rgb(107, 96, 90);">
	
	<!-- 右下角的按钮 -->
	<div style="border:0px solid yellow;float:right;margin-right:20px;margin-top:1px;width:20px;height:20px;">
		<img id="imgbutton" class="notchecked" onclick="submititems();" src="{% static 'img/rightdownbutton.jpg' %}" alt="" style="width:100%;height:100%" />
	</div>
	
	<!-- 右下角的按钮左边的竖线 -->
	<div style="border-right:1px solid rgb(227, 228, 228);float:right;margin-right:30px;margin-top:1px;width:20px;height:20px;"></div>
</div>
</div>
</body>
</html>

